<template lang="jade">
  .cup-item(@click='callback(cup.name)')
    img(:src="cup.img", :alt="cup.alt")
    p.cup-item-name {{cup.name}}
</template>

<style lang="less" scoped>
  .cup-item{
    float: left;
    width: 52pt;
    height: 69.5pt;
    box-sizing: border-box;
    margin-right: 6pt;
    margin-bottom: 25pt;
    text-align: center;
    img{
      width: 52pt;
      left: 0;
      right: 0;
      display: block;
      margin: auto;
    }
    &-name{
      position: relative;
      color: #fff;
      font-size: 10pt;
    }
  }
    
</style>

<script>
  export default {
    props: ['cup', 'callback']
  }
</script>